<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style lang="">
        #yuan { 
            width: 500px;
            height: 500px;
            border: 1px solid black;
            border-radius: 50%;
            margin: 20px auto;
            background-color: bisque;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        #fang {
            width: 490px;
            height: 100px;
            border: 1px solid red;
            background-color: white;
        }
        
        p {
            margin: 0;
        }
        
        #shiJian {
            font-family:  汉仪雪君体繁;
            font-size: 50px;
            line-height: 80px;
            text-align: center;
        }
        
        #Year {
            color: pink;
            background-color: limegreen;
            text-align: right;
        }
    </style>
</head>

<body>
    <script>
        // function aaa(b) {
        //     console.log(b)
        //     return a = 6
        // }

        // var b = 333
        // aaa(8888)



        var divEle = document.createElement('div')
        var divTwo = document.createElement('div')
        var p = document.createElement('P')
        var pTwo = document.createElement('p')

        divEle.id = 'yuan'
        divTwo.id = "fang"
        p.id = 'shiJian'
        pTwo.id = 'Year'

        document.body.appendChild(divEle)
        // 把第二个div放到第一个div上
        document.getElementById('yuan').appendChild(divTwo)
        document.getElementById('fang').appendChild(pTwo)
        document.getElementById('fang').appendChild(p)

        function clock() {
            var now = new Date()
            var h = now.getHours()
            var m = now.getMinutes()
            var s = now.getSeconds()
            s = s < 10 ? '0' + s : s
            m = m < 10 ? '0' + m : m
            h = h < 10 ? '0' + h : h

            var y = now.getFullYear()
            var o = now.getMonth()
            o = o + 1
            var t = now.getDate()
            // var w = now.getDay()         
            //  querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。                   
            document.querySelector('#shiJian').innerHTML =
                h + ':' + m + ':' + s
            document.querySelector('#Year').innerHTML = y + '年' + o + '月' + t + '日'
            setTimeout(clock, 500)
        }
        setTimeout(clock, 500)
    </script>
</body>

</html>